<template>
  <div class="rank">
    <div class="singer-menu">
      <div class="menu-title">华语</div>
      <div class="menu-item" @click="getSingerData('chMSinger')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">华语男歌手</span>
      </div>
      <div class="menu-item" @click="getSingerData('chWSinger')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">华语女歌手</span>
      </div>
      <div class="menu-item" @click="getSingerData('chCombination')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">华语组合</span>
      </div>
      <div class="menu-title">欧美</div>
      <div class="menu-item" @click="getSingerData('westMSinger')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">欧美男歌手</span>
      </div>
      <div class="menu-item" @click="getSingerData('westWSinger')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">欧美女歌手</span>
      </div>
      <div class="menu-item" @click="singerType='westCombination'">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">欧美组合</span>
      </div>
      <div class="menu-title">日韩</div>
      <div class="menu-item" @click="getSingerData('japKorMSinger')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">日韩男歌手</span>
      </div>
      <div class="menu-item" @click="getSingerData('japKorWSinger')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">日韩女歌手</span>
      </div>
      <div class="menu-item" @click="getSingerData('japKorCombination')">
        <span class="linhicon icon-sing"></span>
        <span class="singer-title">日韩组合</span>
      </div>
    </div>
    <div class="singer-content">
      <div class="singer-ctitle">
        <span v-if="singerType=='chMSinger'">华语男歌手</span>
        <span v-if="singerType=='chWSinger'">华语女歌手</span>
        <span v-if="singerType=='chCombination'">华语组合</span>
        <span v-if="singerType=='westMSinger'">欧美男歌手</span>
        <span v-if="singerType=='westWSinger'">欧美女歌手</span>
        <span v-if="singerType=='westCombination'">欧美组合</span>
        <span v-if="singerType=='japKorMSinger'">日韩男歌手</span>
        <span v-if="singerType=='japKorWSinger'">日韩女歌手</span>
        <span v-if="singerType=='japKorCombination'">日韩组合</span>
      </div>
      <div class="singer-table">
        <el-row v-for="(row, index) in rows" :key="index" :gutter="16">
          <el-col :span="4" v-for="item of row" :key="item.id">
            <div class="singer-item" v-if="isCombination">
              <a :href="'/combinationInfo?id='+ item.id">
                <img :src="item.picture.resourcePath" />
              </a>
              <a class="singer-name" :href="'/combinationInfo?id='+ item.id" target="_blank">{{ item.name }}</a>
            </div>
            <div class="singer-item" v-else>
              <a :href="'/singerInfo?id='+ item.id" target="_blank">
                <img :src="item.picture.resourcePath" />
              </a>
              <a class="singer-name" :href="'/singerInfo?id='+ item.id" target="_blank">{{ item.chinesename }}</a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script type="module">
var singers = []
module.exports = {
  data: function() {
    return {
      singerData: [],
      singerType:'chMSinger',
      isCombination: false
    };
  },
  methods: {
    getSingerData(type) {
      this.singerType = type;
      if(this.singerType.search("Combination") != -1) {
          this.isCombination = true;
      } else {
        this.isCombination = false;
      }
      $.ajax({
        url: "/" + type + "Lists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          console.log(data);
          singers = data.singers;
        }
      });
      this.singerData.splice.call(this.singerData, 0, this.singerData.length, ...singers);
      // console.log(this.singerData);
    },
  },
  computed: {
    rows() {
      const rows = [];
      // console.log(this.singerData);
      this.singerData.forEach((item, index) => {
        const row = Math.floor(index / 6);
        if (!rows[row]) {
          rows[row] = []
        }
        rows[row].push(item);
      })
      return rows;
    },
  },
  mounted: function() {
    this.getSingerData(this.singerType);
  }
}
</script>
